<template>
	<view class="content">
		<view class="head" :style="{ 'height': (navHeight + 180) + 'px' }">

			<view class="user" @click="goUrl('/pages/my/user')">
				<view class="left">
					<u-avatar :src="info.avatar" mode="square" size="large"></u-avatar>
					<view class="text">
						<view class="name">{{token?info.name:'注册/登录'}}</view>
						<view class="phone">{{info.mobile?info.mobile:""}}</view>
					</view>
				</view>
				<image v-if="token" class="edit" src="http://sni1muz85.hd-bkt.clouddn.com/img/icons/edit1.png">
				</image>
			</view>
		</view>

		<view class="body">
			<view class="card">
				<view class="item" @click="goUrl('/pages/my/card/card')">
					<view class="line1">
						<view class="num">{{cardNumber?cardNumber:0}}</view>
						<view class="text">张</view>
					</view>

					<view class="line2">
						<image src="http://sni1muz85.hd-bkt.clouddn.com/img/icons/card.png"></image>
						<text>我的签到卡</text>
					</view>
				</view>

				<view class="item" @click="goUrl('/myPage/money/money')">
					<view class="line1">
						<view class="text">￥</view>
						<view class="num">{{ info.balance?info.balance:0 }}</view>
					</view>

					<view class="line2">
						<image src="http://sni1muz85.hd-bkt.clouddn.com/img/icons/money.png"></image>
						<text>我的余额</text>
					</view>
				</view>
			</view>

			<view class="menu">
				<view class="item" v-for="(item, index) in menuList" :key="index" @click="goMenu(item)">
					<text>{{ item.text }}</text>
					<image src="http://sni1muz85.hd-bkt.clouddn.com/img/icons/arrow_right.png"></image>
				</view>
			</view>

			<!-- <button @click="jumpLogin">跳转登录页</button> -->
			<view class="wxad" v-if="bannerAd">
				<ad unit-id="adunit-a52bab5f743a1987" @error="adError" @close="adClose"></ad>
			</view>
			<swiper class="ad" autoplay="true" interval="3000" circular="true"
				:style="{'height':imgHeights[swiperIndex]+'rpx' }" @change="swiperChange">
				<swiper-item class="ad-item" v-for="(item, index) in adList" :key="index" @click="goAdDetail(item)">
					<image class="ad-img" @load="loadImage($event,item)" mode="widthFix"
						:style="{'height':imgheight+'rpx' }" :src="item.img"></image>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				token: uni.getStorageSync('token'),
				cardNumber: 0,
				navHeight: 0, //导航栏高度
				bannerAd: true,
				menuList: [{
						text: "打卡记录",
						url: "/pages/my/rankingHistory/rankingHistory"
					},
					{
						text: "活动发布管理",
						url: "/pages/my/activityManage/activityManage"
					},
					{
						text: "合伙人管理",
						url: "/pages/my/partner/index"
					},
					{
						text: "联系我们",
						url: "/pages/my/service/service"
					},
					{
						text: "中奖记录",
						url: "/myPage/prize_com/myprize"
					},
					// {
					// 	text: "参与抽奖记录",
					// 	url: "/myPage/prize_com/addRecrod"
					// },
					// {
					// 	text: "发起抽奖记录",
					// 	url: "/myPage/prize_com/createRecord"
					// }
				],
				adList: [{
					id: 1,
					img: "http://sni1muz85.hd-bkt.clouddn.com/img/index/swiper2.jpeg",
				}],
				swiperIndex: 0,
				imgHeights: [],
				imgwidth: 0,
				imgheight: 0,
				info: {

				}
			}
		},

		onLoad() {
			// 获取屏幕导航栏高度
			let value = uni.getStorageSync('navHeight')
			this.navHeight = value.height
			if (this.$store.state.userAd) {
				let ad = wx.createInterstitialAd({
					adUnitId: 'adunit-8c93e0f4a71430b7'
				})
				ad.onError(() => {})
				ad.show().then(() => {
					this.$store.state.userAd = false
				})
			}
		},
		onShow() {
			this.token = uni.getStorageSync('token');
			if (this.token) {
				console.log('进入初始化');
				this.initData()
			}
		},
		methods: {
			jumpLogin() {
				uni.navigateTo({
					url: '/myPage/authorize/login/login'
				})
			},
			// 页面跳转
			goUrl(url) {
				if (!this.gotoWxLogin()) {
					return;
				}
				uni.navigateTo({
					url: url,
				});

			},
			loadImage(event, item) {
				// console.log(event)
				// console.log(item)
				this.imgwidth = event.detail.width, //获取图片真实宽度
					this.imgheight = event.detail.height
				let ratio = event.detail.width / event.detail.height
				let viewHeight = 750 / ratio
				this.imgHeights.push(viewHeight)
			},
			initData() {
				this.$api.request({
					url: this.$api.getInfo,
				}).then(res => {
					console.log(res)
					this.info = res.data
					this.$store.state.userId = res.data.id;
					uni.setStorageSync("userId", res.data.id);
					if (res.data.code) {
						uni.setStorageSync("myPartnerCode", res.data.code);
					}
				})

				this.$api.request({
					url: this.$api.count,
				}).then(res => {
					console.log(res)
					this.cardNumber = res.data
				})
				this.getAdList()
			},
			adError() {
				this.bannerAd = false
			},
			adClose() {
				this.bannerAd = false
			},
			getAdList() {
				// this.$api.request({
				//       url:this.$api.advertList,
				//   data:{type:2}
				//     }
				// ).then(res=>{
				//   console.log(res)
				//   this.adList=res.data
				// })
				this.$api.request({
					url: this.$api.getBanner + "?location=" + 2,
				}).then(res => {
					this.adList = res.data;
				})
			},

			// 跳转广告详情
			goAdDetail(item) {
				// uni.navigateTo({
				// 	// url: `/pages/detail/swiperDetail?img=${item.img}`,
				//   url: "/pages/index/ad?link="+item.link+"&times="+item.second+"&type=1"
				//
				// })
				if (item.type === 0) {
					return
				}
				if (item.type === 1) {
					uni.navigateTo({
						url: "/pages/detail/swiperDetail?bannerId=" + item.id
					})
					return;
				}
				if (item.type === 2) {
					uni.navigateTo({
						url: "/pages/index/webView?link=" + item.link
					})
					return;
					// this.webViewLink=item.link
				}
			},

			// 菜单栏跳转
			goMenu(item) {
				if (!this.gotoWxLogin()) {
					return;
				}
				uni.navigateTo({
					url: item.url
				})
			},
			swiperChange(e) {
				this.swiperIndex = e.detail.current
			},
			gotoWxLogin() {
				if (!this.info.avatar || this.info.avatar === '' || this.info.name === '' || !this.info.name) {
					wx.navigateTo({
						url: "/myPage/authorize/login/login"
					})
					return false;
				}
				return true;
			}
		}
	}
</script>

<style lang="less" scoped>
	@import "@/static/css/app.less";

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;

		.head {
			height: 360rpx;
			width: 750rpx;
			background: linear-gradient(#19c68f, #02ca73);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.user {
				width: 690rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				// margin-top: 50rpx;
				.left {
					display: flex;
					align-items: center;

					.text {
						color: #fff;
						margin-left: 30rpx;

						.name {
							width: 300rpx;
							font-size: 42rpx;
							font-weight: bold;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.phone {
							font-size: 28rpx;
							margin-top: 10rpx;
						}
					}
				}

				.edit {
					height: 34rpx;
					width: 34rpx;
					margin-right: 20rpx;
				}
			}
		}

		.body {
			width: 100%;
			position: relative;
			top: -130rpx;
			background-color: #F7F7F7;
			border-radius: @radius_1 @radius_1 0 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: -100rpx;

			.card {
				width: 710rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 20rpx;

				.item {
					width: 345rpx;
					height: 200rpx;
					background-color: #fff;
					border-radius: 15rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.line1 {
						display: flex;
						align-items: flex-end;

						.num {
							font-size: 48rpx;
							font-weight: bold;
							margin: 0 10rpx;
							color: #111111;
						}

						.text {
							font-size: 24rpx;
							margin-bottom: 10rpx;
							color: #808080;
						}
					}

					.line2 {
						display: flex;
						align-items: center;
						margin-top: 10rpx;

						image {
							height: 50rpx;
							width: 50rpx;
						}

						text {
							font-size: 32rpx;
							margin-left: 10rpx;
							color: #111111;
						}
					}
				}
			}

			.menu {
				width: 650rpx;
				margin-top: 20rpx;
				background-color: #fff;
				padding: 0 30rpx;
				border-radius: @radius;

				.item {
					display: flex;
					justify-content: space-between;
					margin-top: 20rpx;
					padding: 40rpx 0;
					border-bottom: 0.6rpx solid #EFEFEF;

					text {
						font-size: 32rpx;
						color: #111111;
					}

					image {
						height: 30rpx;
						width: 30rpx;
					}
				}
			}

			.wxad {
				margin-top: 20rpx;
				border-radius: 10rpx;
				overflow: hidden;
				width: 710rpx;
			}

			.ad {
				margin-top: 20rpx;
				width: 710rpx;

				height: 0;

				.ad-item {
					width: 100%;

					.ad-img {
						height: 100%;

						width: 100%;
						border-radius: 15rpx;
					}
				}
			}
		}
	}
</style>